<template>
  <KView class="group-head-img">
    <KView v-for="(person,index) in group.personList" :key="`person_${index}`">
      <KView v-if="person.name" class="group-head-img-item">
        <sys-avatar :url="person.url" shape="circle"></sys-avatar>
      </KView>
      <KView v-else class="group-head-img-item group-head-img-none flex-central" @click="joinGroup">
        <sys-svg name="questionMark" color="#b6b6b6"></sys-svg>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysAvatar from 'common/sysAvatar';
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      group: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    methods:{
      joinGroup(){
        this.$emit('join-group',this.group);
      }
    },

    components: {
      SysAvatar,
      SysSvg
    }
  };

</script>

<style lang="scss">
  .group-head-img {
    height: formatPx(120);

    >div {
      float: left;
      width: formatPx(120);
      height: formatPx(120);
      margin-right: formatPx(70);

      &:last-child {
        margin-right: 0;
      }
    }

    .group-head-img-item {
      border: 1px solid #59c264;
      height: calc(100% - 2px);
      border-radius: formatPx(60);

      &.group-head-img-none {
        border: 1px dashed #b6b6b6;
        .sys-svg{
          width: formatPx(55);
          height: formatPx(55);
        }
      }
    }
  }

</style>
